<template>
    <div class="detail-page">
        <header>
            <van-nav-bar title="详细信息" left-text="" left-arrow @click-left="onClickLeft" />
        </header>
        <main>
            <div class="cart-des">
                <div class="img">
                    <img :src="(baseURL + detailCart.bgUrl)" alt="">
                </div>
                <div class="title">
                    <p class="name">{{ detailCart.name }}</p>
                    <p class="adress">{{ detailCart.detailDate }}</p>
                    <p class="time">{{ detailCart.detailaddress }}</p>
                    <p class="adr">{{ detailCart.address }}</p>
                    <p class="want"><van-icon name="like-o" />&nbsp;{{ detailCart.likes }}</p>
                </div>
            </div>
            <div class="cart-att">
                <p>{{ detailCart.detailInRemark }}</p>
                <p>{{ detailCart.detailOutRemark }}</p>
                <p>{{ detailCart.nowPrice }}</p>
                <p>{{ detailCart.detailChild }}</p>
            </div>
            <div class="cart-img">
                <img :src="baseURL + img" alt="">
            </div>
        </main>
        <van-action-bar>
            <van-action-bar-icon icon="cart-o" text="购物车" @click="jumpToCart" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="handleAddToCart(detailCart)" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup  >
import { useRoute, useRouter } from 'vue-router'
import { getDetail } from '../../apis/homeApi'
import { ref } from 'vue'
import useCartStore from '../../store/cart'
import { Toast } from 'vant'
import { baseURL } from '../../apis/Ajax'
const route = useRoute()
const router = useRouter()
const detailCart = ref('')
const store = useCartStore()
let img = ref('')

// 获取商品详情
async function fetchDeatil() {
    const { id } = route.query
    await getDetail(id).then(d => {
        if (d.code === 200) {
            console.log(d)
            detailCart.value = d.data
            img = d.data.content.split('JOIN__STRING')[0]
            console.log(detailCart.value)
        }
    })
}
fetchDeatil()

// 跳转到购物车
function jumpToCart() {
    router.push('/cart')
}
// 商品添加到购物车
function handleAddToCart(item) {
    console.log(item)
    let { id, nowPrice, name, bgUrl, detailaddress
    } = item
    nowPrice = nowPrice.slice(1,3)
    const currentProduct = {
        id,
        project_name: name,
        cover: bgUrl,
        venue_name: detailaddress,
        price_low: nowPrice,
        amount: 1,
        checked: false,
    }
    store.addToCart(currentProduct)
    Toast.success('加入购物车成功!')
    console.log(store.cart)
}

// 返回上一页
function onClickLeft() {
    history.back()
}
</script>

<style  scoped   lang="less">
@import '../../style/common.less';

.detail-page {
    display: block;
    position: relative;
    height: 100%;
    header{
        width: 100%;
        height: 46px;
        position: fixed;
        top: 0;
        left: 0;
    }
    >main {
        margin-top: 46px;
        width: 100%;
        height: calc(100% - 46px);

        .cart-des {
            display: flex;
            height: 212px;
            padding: 6px;
            background: #fff;

            .img {
                flex: 0 0 150px;

                >img {
                    width: 150px;
                    height: 200px;
                }
            }

            .title {
                height: 200px;
                display: flex;
                flex-direction: column;
                font-size: 12px;
                background: #fff;

                >.name {
                    font-size: 14px;
                    text-indent: 6px;
                    padding: 0 6px;
                }

                .adress {
                    height: 30px;
                    margin: 0;
                    padding: 0 6px;
                    color: @g07;
                }

                >.time {
                    color: @g06;
                    height: 30px;
                    padding: 0 6px;
                }

                .adr {
                    height: 30px;
                    margin: 0;
                    padding: 0 6px;
                    color: @g07;
                }

                .want {
                    color: red;
                    padding: 0 6px;
                }
            }
        }

        .cart-att {
            margin: 6px;
            height: 98px;
            background: #fff;
            padding: 10px 6px 6px 6px;

            >p {
                font-size: 12px;
                color: @g05;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 20px;
                margin: 0;
            }
        }

        .cart-img {
            width: 100%;
            margin: 6px;

            img {
                width: 100%;
            }
        }
    }
}
</style>

